{% extends "admin/base.html" %}

{% block content %}

<div class="jumbotron">
	<div class="container">
		<h1>Challenge dependencies</h1>
	</div>
</div>

<div class="container">
    <div id="errors" class="row">
        <div class="col-md-12">
            <h1 class="text-center" id="error-msg"></h1>
        </div>
    </div>
</div>

<div class="container">
    <table id="challenges" class="table table-striped">
        <thead>
        <tr>
            <td><b>ID</b></td>
            <td><b>Name</b></td>
            <td><b>Dependencies</b></td>
            <td><b>Settings</b></td>
        </tr>
        </thead>
        <tbody>
        {% for challenge in challenges %}
            <tr>
                <td>{{ challenge.id }}</td>
                <td>{{ challenge.name}}</td>
                <td><ul style="list-style-type: none;">
                {% for dep in challenge.dependencies %}
                    <li chal_id="{{ dep.id }}">
                        <form class="delete-dependency" action="/admin/dependencies/{{ challenge.id }}/delete" method="POST">
                            <input value="{{ nonce }}" name="nonce" hidden>
                            <input value="{{ dep.id }}" name="dependency_id" hidden>
                            <input type="text" style="border-width: 0; background-color: transparent;" 
                                value="{{ dep.name }}" disabled>
                            <span class="delete-dependency" data-toggle="tooltip"
                                data-placement="top" chal-id="{{ challenge.id }}" 
                                title="Delete dependency">
                                <button style="background-color: transparent; border: none">
                                    <i class="btn-fa fas fa-times" aria-hidden="true"></i>
                                </button>
                        </form>
                    </li>
                {% endfor %}
                </ul></td>
                <td>
                    <form class="submit-new-dependency" action="/admin/dependencies/{{ challenge.id }}/new" method="POST">
                        <input value="{{ nonce }}" name="nonce" hidden>
                        <select name="dependency_id">
                        {% for c in challenges %}
                            {% if c.id != challenge.id 
                                and c.id not in challenge.dependencies|map(attribute="id") %}
                                <option value="{{ c.id }}">{{ c.name }}</option>
                            {% endif %}
                        {%endfor %}
                        </select>
                        &nbsp;
                        <span data-toggle="tooltip" data-placement="top" title="New dependency">
                            <button style="background-color: transparent; border: none">
                                <i class="btn-fa fas fa-plus" aria-hidden="true"></i>
                            </button>
                        </span>
                    </form>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
</div>

{% endblock %}

{% block scripts %}
<script src="/plugins/ctfd-challenge-dependencies/src/assets/dependencies.js"></script>
{% endblock %}
